<template>
  <el-card ref="wrapper" :body-style="{ padding: 0 }">
    <div slot="header">
      <el-form :inline="true" :model="paintConfig" class="form-inline">
        <el-form-item>
          <b slot="label">工具选择：</b>
          <template>
            <el-radio v-model="radio" label="source-over">画笔</el-radio>
            <el-radio v-model="radio" label="destination-out">橡皮檫</el-radio>
          </template>
        </el-form-item>
        <el-divider direction="vertical" class="divider" />
        <el-form-item style="margin-left: 20px">
          <b slot="label">画笔大小：</b>
          <el-slider v-model="strokeWidth" style="width: 200px" :max="40" />
        </el-form-item>
        <el-divider direction="vertical" class="divider" />
        <el-form-item style="margin-left: 20px">
          <b slot="label">颜色选择：</b>
          <el-color-picker
            v-model="stroke"
            size="small"
            style="margin-top: 4px"
          />
        </el-form-item>
        <el-divider direction="vertical" class="divider" />
        <el-form-item style="margin-left: 20px">
          <el-button type="primary" @click="clearStage" size="small"
            >清空画布</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <v-stage
      :config="stageConfig"
      @mousedown="mousedownHandler"
      @mouseup="mouseupHandler"
      @mousemove="mousemoveHandler"
    >
      <v-layer>
        <v-line v-for="(line, index) in lines" :key="index" :config="line" />
      </v-layer>
    </v-stage>
  </el-card>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import debounce from "lodash/debounce";
export default {
  name: "AppStage",
  data() {
    return {
      // 单选框选择
      radio: "source-over",
      // 画布配置
      stageConfig: {
        width: 800,
        height: 700,
      },
      // 绘画状态
      painting: false,
      paintConfig: {
        stroke: "#df4b26",
        strokeWidth: 5,
        globalCompositeOperation: "source-over",
      },
      stroke: "#df4b26",
      strokeWidth: 5,
    };
  },
  computed: {
    ...mapState(["lines"]),
    ...mapGetters(["isGameStarted", "isGameHolder"]),
  },
  mounted() {
    // 将画布宽度设置与容器同宽
    this.resizeHandler();
    window.addEventListener("resize", debounce(this.resizeHandler, 300));
  },
  beforeDestroy() {
    window.removeEventListener("resize", debounce(this.resizeHandler, 300));
  },
  methods: {
    // 监听窗口变化
    resizeHandler() {
      console.log("width: ", this.$refs.wrapper.$el.offsetWidth);
      this.stageConfig.width = this.$refs.wrapper.$el.offsetWidth;
    },
    // 鼠标按下
    mousedownHandler(e) {
      if (!this.isGameStarted || !this.isGameHolder) return;

      this.painting = true;
      // 创建一个新线条
      const newLine = {
        stroke: this.stroke,
        strokeWidth: this.strokeWidth,
        points: [e.evt.layerX, e.evt.layerY],
        globalCompositeOperation: this.radio,
        lineCap: "round",
        lineJoin: "round",
      };
      // 本地画线，存到vuex中
      this.$store.commit("drawNewLine", newLine);
      // 请求服务器
      this.$store.dispatch("sendDrawNewLine", newLine);
    },
    // 鼠标拖动
    mousemoveHandler(e) {
      if (!this.painting) return;
      const lastLine = this.lines[this.lines.length - 1];
      lastLine.points = lastLine.points.concat([e.evt.layerX, e.evt.layerY]);
      // 存到本地vuex中
      this.$store.commit("updateNewLine", lastLine);
      // 请求服务器
      this.$store.dispatch("sendUpdateNewLine", lastLine);
    },
    // 鼠标释放
    mouseupHandler() {
      this.painting = false;
    },
    // 清空画布
    clearStage() {
      if (!this.isGameStarted || !this.isGameHolder) return;
      // 存到本地vuex中
      this.$store.commit("updateLines", []);
      this.$store.dispatch("clearLines");
    },
  },
};
</script>

<style>
.form-inline {
  height: 40px;
}

.divider {
  height: 40px !important;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>